<template>
<div>
    <div class="icon">
        <!-- 返回 -->
      <van-icon name="revoke" size=40 @click="$router.back()"/>
        <!-- 分享 -->
      <van-icon name="share-o" size=40 @click="share"/>
      <!-- 显示分享面板 -->
       <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
     </div>
</div>
     
</template>

<script>
export default {
     data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    onSelect(option) {
      this.$toast(option.name);
      this.showShare = false;
    },
    share(){
        console.log(1111);
        this.showShare = true
    }
  },
}
</script>

<style lang="less" scoped>
.icon{
    display: flex;
    justify-content: space-between;
    position: absolute;
    top:10px;
    width: 100%;
    .van-icon {
    z-index: 10;
    display: inline-block;
    font: normal normal normal 14px/1 vant-icon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
 }
}

</style>